﻿@page "/components/colorpicker"

<DocsPage>
    <DocsPageHeader Title="Color Picker" SubTitle="A short description of the component." />
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Basic Usage">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="ColorPickerBasicExample">
                <ColorPickerBasicExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Parts">
                <Description>All parts of the color picker can be removed individually if you just want certain functionality.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="ColorPickerPlaygroundExample" ShowCode="false">
                <ColorPickerPlaygroundExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Color Picker View">
                <Description>The default view can be changed with <CodeInline>ColorPickerView</CodeInline> and can be useful when you want a minimalistic color picker or force the use of certain colors.</Description>
            </SectionHeader>
            <SectionContent Code="ColorPickerViewModeExample">
                <ColorPickerViewModeExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Color Picker Mode">
                <Description>You can set the default mode of the colorpicker with the <CodeInline>ColorPickerMode</CodeInline> prop. This can be useful combined with <CodeInline>DisableModeSwitch</CodeInline> to force the usage of a specific color mode.</Description>
            </SectionHeader>
            <SectionContent Code="ColorPickerColorModeExample">
                <ColorPickerColorModeExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Custom Palette">
                <Description>The default palette can be changed with <CodeInline>Palette</CodeInline> property. The first five colors show up in the quick view when clicking the color preview dot.</Description>
            </SectionHeader>
            <SectionContent Code="ColorPickerPaletteExample" ShowCode="false">
                <ColorPickerPaletteExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Alpha">
                <Description>You can disable the alpha slider and its textfield counterpart by setting <CodeInline>DisableAlpha</CodeInline> to true, doing so will remove any transparency from the color and output RGB, HSL, HEX instead of RGBA, HSLA and HEXA.</Description>
            </SectionHeader>
            <SectionContent Code="ColorPickerAlphaExample">
                <ColorPickerAlphaExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Switch Mode">
                <Description>Switch Mode lets the user switch betwen RGB, HSL and HEX the button can be disabled with <CodeInline>DisableModeSwitch</CodeInline> set to true, this can be useful if you want to control what type of input/output should be used.</Description>
            </SectionHeader>
            <SectionContent Code="ColorPickerSwitchModeExample">
                <ColorPickerSwitchModeExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Dialog Mode">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="ColorPickerDialogExample">
                <ColorPickerDialogExample />
            </SectionContent>
        </DocsPageSection>

		 <DocsPageSection>
            <SectionHeader Title="Inline Mode">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="ColorPickerInlineExample">
                <ColorPickerInlineExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Static Mode">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="ColorPickerStaticExample">
                <ColorPickerStaticExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Elevation">
                <Description>You can change the elevation with the <CodeInline>Elevation</CodeInline> parameter. The default value is 0 for static and 8 for inline.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Class="demo-datetime-margin" Code="ColorPickerElevationExample">
                <ColorPickerElevationExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Example Usage">
            </SectionHeader>
            <SectionContent Class="px-0 pt-0" Code="ColorPickerExampleUsageExample" ShowCode="false">
                <ColorPickerExampleUsageExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Disable Drag effect">
                <Description>
                    <MudAlert Severity="Severity.Warning">
                        In Spectrum mode, the color selector (circle) will follow the mouse. This is implemented by listening to the mouse move DOM event with an in-built throttle mechanism to prevent flooding events. However, there are occasions like long latency in Blazor Server-Side where this implementation hasn't the expected visual assistance. If DisableDragEffect is set to true, no events will be fired. Per default, the effect is enabled.
                    </MudAlert>
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="ColorPickerDragEffectDisabledExample">
                <ColorPickerDragEffectDisabledExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>